<script>
import {defineComponent} from 'vue'
import authPage from "@/utils/pages/authPage";
import actApi from "@/utils/api/actApi";
import UserAvatarName from "@/components/UserAvatarName.vue";
import QNList from "@/views/act/components/QNList.vue";

export default defineComponent({
  name: "ApplyInfo",
  components: {QNList, UserAvatarName},
  created() {
    let {applyId, actId} = this.$route.query
    if(applyId && actId){
      this.initApplyInfo(actId, applyId)
    }else {
      authPage.status(-3).open().replace()
    }
  },
  data(){
    return {
      applyId: null,
      user: null,
      qn: [],
      sign: null
    }
  },
  methods: {
    async initApplyInfo(actId, applyId){
      let {user, qn, sign} = await actApi.getApplyInfo(actId, applyId)
      this.user = user
      this.qn = qn
      this.sign = sign
      this.applyId = Number(applyId)
    }
  }
})
</script>

<template>
  <div style="margin: 10px" v-if="applyId===null">
    <van-skeleton title avatar :row="3" />
  </div>
  <div v-else class="apply-info-container-div">
    <div class="apply-info-head-div">
      活动报名详情
    </div>
    
    <div class="apply-user-item-div">
      <div class="apply-user-item-left-div">
        <UserAvatarName
            :user="user"
        />
      </div>
      <div class="apply-user-item-right-div">
          <span v-show="sign">
            <van-tag type="success">已签到</van-tag>
          </span>
      </div>
    </div>
    <QNList
        v-if="qn.length > 0"
      :qn="qn"
      show
      />
    <div v-else style="text-align: center">
      无活动问卷
    </div>
  </div>
</template>

<style scoped lang="less">

@import "@/assets/style/less/all.less";

.apply-info-container-div {
  display: flex;
  flex-direction: column;
  
  padding: 3px 14px;
  
  >.apply-info-head-div{
    font-size: 20px;
    color: cornflowerblue;
    text-align: center;
  }
}
.apply-user-item-div {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: white;
  border: 1px solid @user_index_cell_group_border_color;
  border-radius: 5px;
  margin-bottom: 3px;
  >.apply-user-item-left-div{
    .flex-item-fit-width();
  }
  >.apply-user-item-right-div{
    .flex-item-fix();
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 3px;
  }
}
</style>